import { Outlet, useNavigate } from 'react-router'
import { useState } from 'react'
import { ZoomLayout } from '@zoom-design/zoom-design-demo'
import { wmsRouter } from '../../router/router'

const Frame = () => {
  // const { token } = theme.useToken()
  const navigate = useNavigate()
  const [pathName, setPathName] = useState<string | undefined>('')
  return (
    <>

      {/*<ProLayout*/}
      {/*  layout={'mix'}*/}
      {/*  title={'中鼎集成'}*/}
      {/*  headerContentRender={() =><ProBreadcrumb />}*/}
      {/*  style={{*/}
      {/*    width: '100vw',*/}
      {/*    height: '100vh',*/}
      {/*    // backgroundColor: token.colorBgContainer*/}
      {/*  }}*/}
      {/*  location={{ pathname: pathName }}*/}
      {/*  route={wmsRouter()}*/}
      {/*  // fixedHeader={true}*/}
      {/*  // fixSiderbar={true}*/}
      {/*  menuDataRender={(menuData: MenuDataItem[]) => {*/}
      {/*    console.log(menuData)*/}
      {/*    return menuData*/}
      {/*  }}*/}
      {/*  // menuProps={{ theme: 'light' }}*/}
      {/*  menuItemRender={(item, dom) => (*/}
      {/*    <div*/}
      {/*      onClick={() => {*/}
      {/*        console.log(dom)*/}
      {/*        console.log(item)*/}
      {/*        setPathName(item.itemPath)*/}
      {/*        navigate(item.itemPath)*/}
      {/*      }}*/}
      {/*    >*/}
      {/*      {dom}*/}
      {/*    </div>*/}
      {/*  )}*/}
      {/*  footerRender={(props, defaultDom) => {*/}
      {/*    console.log('footer', props)*/}
      {/*    console.log('defaultDom', defaultDom)*/}
      {/*    return (<>*/}
      {/*      <div style={{ height: '30px', backgroundColor: token.colorBgContainer }}>*/}
      {/*        <div style={{ textAlign: 'center',color: token.colorText }}>*/}
      {/*          2023 版权所有 © 中鼎集成*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*      /!*<DefaultFooter*!/*/}
      {/*      /!*  copyright={`2023 版权所有 © 中鼎集成`}*!/*/}
      {/*/>*/}
      {/*    </>)*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <PageContainer*/}
      {/*    title={false}*/}
      {/*    breadcrumbRender={false}*/}

      {/*  >*/}
      {/*    <Outlet />*/}
      {/*  </PageContainer>*/}
      {/*</ProLayout>*/}
      <ZoomLayout
        LayoutProps={{
          title: '中鼎集成',
          token:{
            header:{
              colorBgHeader:  'rgba(42,122,251,1)',
              colorHeaderTitle: '#fff',
            },
            sider: {
              colorMenuBackground: '#fff',
              colorMenuItemDivider: '#dfdfdf',
              colorTextMenu: '#595959',
              colorTextMenuSelected: 'rgba(42,122,251,1)',
              colorBgMenuItemSelected: 'rgba(230,243,254,1)',
            },
          },
          location: { pathname: pathName },
          menu:{
            collapsedShowTitle: true
          },
          route:wmsRouter(),
          menuItemRender: (item, dom) => (
            <div
              onClick={() => {
                console.log(dom)
                console.log(item)
                setPathName(item.itemPath)
                navigate(item.itemPath)
              }}
            >
              {dom}
            </div>
          )
        }}
        ContainerProps={{
          content: <Outlet />,
          style: {
            height: '100vh',
            backgroundColor: '#f0f2f5'
          },
          token:{
            paddingInlinePageContainerContent: 5
          }
        }}
      />
    </>
  )
}

export default Frame